<template>
  <div class='container'>
    <el-card class="box-card">
      <div class="app">
        <div class="left">
          <span class="name">关键字</span>
          <el-input class="search" clearable v-model="q.keyword"></el-input>
          <span class="name" style='margin: 0 10px;'>状态</span>
          <el-select v-model="q.state" placeholder="请选择">
            <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button size="small" style='margin-left: 10px;' @click="empty">清空</el-button>
          <el-button type="primary" size="small" @click="hSearch">搜索</el-button>
        </div>
        <div class="right">
          <el-button type="success" icon="el-icon-edit" size="small" @click="hAdd">
            新增技巧
          </el-button>
        </div>
      </div>
      <div class="tips">
        <i class="el-icon-info" />
        <span class="amount">数据一共有{{counts}}条</span>
      </div>
      <!-- 表格 -->
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column label="文章标题">
          <template v-slot="{row}">
            {{row.title}}
            <i v-if="row.videoURL" @click="playVideo(row)" class="el-icon-film"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" width="150">
        </el-table-column>
        <el-table-column prop="username" label="录入人" width="180">
        </el-table-column>
        <el-table-column label="录入时间" width="200">
          <template v-slot="{row}">
            {{formatTime(row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template v-slot="{row}">
            {{'已'+ formatState(row.state)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="{row}">
            <el-button type="text" @click="hPreview(row)">预览</el-button>
            <el-button type="text" @click="hState(row)">{{row.state === 0 ? '启用' : '禁用'}}</el-button>
            <el-button type="text" @click="hEdit(row)">修改</el-button>
            <el-button type="text" :disabled="row.state===1" @click="hDel(row.id)">删除</el-button>
            <!-- <el-button :disabled="row.state !== 1" type="text" @click="hEdit(row.id)">修改</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page" :page-sizes="[ 10, 20, 50]" :page-size="q.pagesize" background :total="counts" layout="prev, pager, next, sizes, jumper">
      </el-pagination>
    </el-card>
    <!-- 新增 or 修改 弹层 -->
    <el-dialog :title="isEdit? '修改文章': '新增文章'" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" width="45%" @closed="hClosed">
      <articlesAdd v-if="dialogVisible" :editRow="editRow" @close="dialogVisible = false" @update="loadArticleList" />
    </el-dialog>
    <!-- 预览文章弹层 -->
    <el-dialog title="预览文章" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="showDialog" width="45%">
      <articlesPreview v-if="showDialog" :presentArticle="presentArticle" />
    </el-dialog>
    <playVideo v-if="playDialog" :src="src" @close="playDialog = false" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import articlesAdd from '../components/articles-add.vue'
import articlesPreview from '../components/articles-preview.vue'
import playVideo from '../components/playVideo.vue'
import { list, remove, changeState } from '../../api/hmmm/articles'
import { status } from '../../api/hmmm/constants'
const obj = {}
status.forEach(item => { obj[item.value] = item.label })
export default {
  components: {
    articlesAdd,
    articlesPreview,
    playVideo
  },
  data () {
    return {
      q: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      list: [],
      counts: 0,
      dialogVisible: false,
      isEdit: false,
      curId: 0,
      status,
      showDialog: false,
      presentArticle: {},
      editRow: {},
      playDialog: false,
      src: ''
    }
  },
  created () {
    this.loadArticleList()
  },
  methods: {
    // 获取文章列表
    async loadArticleList (q = this.q) {
      const res = await list(q)
      this.list = res.data.items
      this.counts = res.data.counts
    },
    // 格式化时间
    formatTime (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 格式化文章状态
    formatState (state) {
      return obj[state]
    },
    // 清空
    empty () {
      this.q = {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      }
      this.loadArticleList()
    },
    // 搜索
    hSearch () {
      this.q.page = 1
      this.loadArticleList()
    },
    // 新增技巧
    hAdd () {
      this.isEdit = false
      this.curId = 0
      this.dialogVisible = true
    },
    // 分页
    handleSizeChange (size) {
      this.q.pagesize = size
      this.loadArticleList()
    },
    // 分页
    handleCurrentChange (page) {
      this.q.page = page
      if (this.q.keyword !== '' && this.q.state !== '') {
        this.loadArticleList({ ...this.q, keyword: '' })
      } else {
        this.loadArticleList()
      }
    },
    // 删除文章
    async hDel (id) {
      const result = await this.$confirm('确定要删除该文章吗？', '提示', { type: 'warning' }).catch(e => e)
      if (result !== 'confirm') return
      try {
        if (this.list.length === 1 && this.q.page > 1) this.q.page--
        await remove({ id })
        this.$message.success('删除成功！！')
        this.loadArticleList()
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    // 改变文章状态
    async hState ({ id, state }) {
      const obj = { id, state }
      let msg = ''
      if (state) {
        obj.state = 2
        msg = '禁用成功'
      } else {
        obj.state = 1
        msg = '启用成功'
      }
      try {
        await changeState(obj)
        this.$message.success(msg)
        this.loadArticleList()
      } catch (e) {
        console.log(e)
      }
    },
    // 预览文章
    hPreview (row) {
      this.showDialog = true
      this.presentArticle = row
    },
    // 修改文章
    hEdit (row) {
      this.isEdit = true
      this.editRow = row
      this.dialogVisible = true
    },
    hClosed () {
      this.editRow = {}
    },
    playVideo ({ videoURL }) {
      this.playDialog = true
      // console.log(videoURL)
      this.src = videoURL
    }
  }

}
</script>

<style scoped>
.app {
  display: flex;
  justify-content: space-between;
}
.box-card {
  margin: 10px;
}
.name {
  font-weight: 700;
  color: #60627f;
  font-size: 14px;
}
.search {
  width: 190px;
  margin: 0 10px;
}
.tips {
  line-height: 34px;
  margin: 15px 0;
  padding: 0px 15px;
  border-radius: 5px;
  background: #f4f4f5;
}
i {
  margin-right: 10px;
  color: #909399;
}
.amount {
  font-size: 13px;
  color: #909399;
}
.el-pagination {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
.el-icon-film {
  color: #00f;
  font-size: 18px;
}
</style>
